<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <button id="btnPost">提交</button>
    <button id="cancelToken">取消提交</button>
    <script>
        const myAxios = axios.create({
            baseURL: '/axios',
            timeout: 10000,
            headers: {}
        })

        /* //创建一个取消请求对象
        //在配置对象中配置 
        const CancelToken = axios.CancelToken
        // myAxios.interceptors.request.use(() => {})
        // myAxios.interceptors.response.use(() => {}, () => {})

        //声明全局变量 ,接收取消请求参数
        let cancel = null
        btnPost.onclick =async function () {
            try {
                const result  = await myAxios.get('/get', {
                params:{
                    userId:'001'
                },
                 Token((a) => {

                    cancel = a
                })
            })
            } catch (error) {
                console.log(error);
            }
            
        }
        cancelToken.onclick = function () {

            cancel()
        } */
      const  CancelToken = axios.CancelToken
        let cancel=null
        btnPost.onclick=async function(){
           return await myAxios.get('/get',{
                params:{
                    userId:'001'
                },
                cancelToken:new CancelToken((f)=>{
                    cancel=f
                })
            }).then(resolve=>{

            }).catch(err=>{

            })
        }
        cancelToken.onclick=function(){
            cancel()
        }
        
    </script>
</body>

</html>